<template>
    <div>
           <!-- 品牌文化 -->
      <div class=" content content-info">
        <a-input-search placeholder="搜索" style="width: 1000px" >
            <img :src="topImg" alt="">
        </a-input-search>
          <div class="info-top ">
             <p class="label"> 
               <span>Brand culture</span>
              </p>
           <p class="culture">品牌文化</p>
          </div>
          <div class="flex">
              <img :src="cultureImg" alt="" class="cultureImg">
            <ul class="cultureInfo">
              <li v-for="item in cultureInfo " :key="item.key">{{item.title}}</li>
              <p class="more">
              <img :src="house1Img" alt="">
              <!-- <font>查看更多</font> -->
              <a-button class="btn" size="large">查看更多</a-button>

              </p>
            </ul>

          </div>
      </div>
      <!-- 走马灯 -->
      <div class="content content-rotation box" >
        <ul >
            <li v-for="(item,i) in listData " :key="i">
                <img  :src="item.src" />
            </li>
        </ul>
        <img class="hill" :src="hill2Img" >
      </div>
      <!-- 产品服务 -->
      <div class="content content-service">
        <img :src="service1Img" alt="" class="service1Img">
          <div class="info-top service-info">
              <p class="label">  <span>Product service</span></p>
              <p class="culture" style="padding-left:'17px'">产品服务
                <img :src="topImg" alt="" class="topImg">  
              </p>
              <p class="serviceImg">
                 <img :src="service2Img" alt="" >
              </p>       
              <p class="tips">传承精品</p>
              <p class="text">
                存心于仁、诚信为本、尊古创新、医药并重，
                  <br>
                 次货不上柜，配方遵古道，传承精品中药
              </p>
              <a-button class="btn" size="large" @click="clickDetail(0)">查看更多</a-button>
          </div>
      </div>
      <!-- 大事记 -->
       <div class="content content-service memoir">
            <div class="info-top news-info">
                 <p class="label"> 
                   <span>News center</span>
                 </p>
               <p class="culture">
                新闻中心
                  <img :src="topImg" alt="" class="topImg">  
               </p>
                <p class="service2Img">
                   <img :src="service2Img" alt="" >
                </p>       
                <p class="tips">大事记</p>
               <p class="text">
                张衡春创始于清朝嘉庆五年，秉承祖训，
                <br>
                存心于仁、诚信为本、尊古创新。
               </p>
                <div class="hill3Img">
                  <a-button class="btn" size="large" @click="clickDetail(1)">查看更多</a-button>
                </div>         
             </div>
        <div class="news-right">
          <ul>
            <li v-for="(r,i) in news" :key="i"><img :src="r.src" :alt="r.title">
            <span class="title">{{r.title}}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 联系方式 -->
      <footer class="content content-service footer">
        <img :src="footerImg" alt="" class="footerImg">
            <div class="info-top footer-info">
                 <p class="label"> 
                  <span>Contact us</span>
                 </p>
               <p class="contact">
                与我们联系
                <ul>
                  <li v-for="(j,i) in  qrcodes" :key="i" >
                  <img :src="j.src" >
                   <span>{{j.title}}</span></li>
                </ul>
               </p>  
                <p class="tips">张恒春</p>
               <p class="text">
                祖训“虔诚虽无人见，存心自有天知”是张恒春诚信为本，存心于仁的企业精神。
                <br>
              二百年来始终秉承“次货不上柜，佩服尊古法”、“精选道地药材”、
              <br>
              "遵古炮制饮片"的质量观享誉海内外，与同仁堂、胡庆余堂、叶开泰齐名，
              <br>
              被誉为全国三块半金子招牌之一，1991年被评为“中华老字号”。
               </p>
             </div>
        <div class="footer-right">
          <p>
            <a-icon type="phone" />
            0553-5849356
          </p>
          <p>
            <a-icon type="environment" />
          中国（安徽）自由贸易试验区芜湖片区凤鸣湖南路10号</p>
          <p>
            <a-icon type="mail" />
            241006
          </p>
        </div>
      </footer>
    </div>
</template>

<script>
import '@/assets/less/HomePage.less'
export default {
    name: 'ZhanghengchunHomePage',

    data() {
        return {
             cultureInfo:[
              {title:'存心以仁的服务理念',key:0},
              {title:'医药并重的职业理念',key:1},
              {title:'尊古创新的发展理念',key:2},
              {title:'诚信以本、以义取利的经营理念',key:3},
            ],
             topImg:require('@/assets/imsges/top.png'),
            logoImg:require('@/assets/imsges/logo.jpg'),
            logoRImg:require('@/assets/imsges/logo-r.png'),
            cultureImg:require('@/assets/imsges/culture.jpg'),
            house1Img:require('@/assets/imsges/house1.png'),
            hill2Img:require('@/assets/imsges/hill2.png'),
            hill3Img:require('@/assets/imsges/hill3.png'),
            service1Img:require('@/assets/imsges/service1.png'),
            service2Img:require('@/assets/imsges/service2.png'),
            footerImg:require('@/assets/imsges/footer.png'),
             listData: [
                {
                  src:require('@/assets/imsges/rotation1.png'),
                },
                {
                 src:require('@/assets/imsges/rotation2.jpg'),
                },
                {
                src:require('@/assets/imsges/rotation3.png'),
                },
                {
                  src:require('@/assets/imsges/rotation4.png'),
                },
                {
                 src:require('@/assets/imsges/rotation5.png'),
                },
                {
                src:require('@/assets/imsges/rotation6.jpg'),
                },
                {
                src:require('@/assets/imsges/rotation7.jpg'),
                },
                {
                src:require('@/assets/imsges/rotation8.png'),
                },
                {
                src:require('@/assets/imsges/rotation9.png'),
                },
                {
                src:require('@/assets/imsges/rotation10.png'),
                },
                {
                src:require('@/assets/imsges/rotation11.png'),
                },
                {
                src:require('@/assets/imsges/rotation12.png'),
                },
                {
                src:require('@/assets/imsges/rotation13.png'),
                },
            ], // 走马灯
            news:[
              {src:require('@/assets/imsges/news1.jpg'),title:'历史渊源'},
              {src:require('@/assets/imsges/news2.png'),title:'馆藏珍品'},
              {src:require('@/assets/imsges/news3.jpg'),title:'牌匾题词'},
              {src:require('@/assets/imsges/news4.jpg'),title:'企业荣誉'},
              {src:require('@/assets/imsges/news5.png'),title:'创业发展'},
              {src:require('@/assets/imsges/news6.jpg'),title:'名人轶事'},
            ],//大事记
            qrcodes:[
              {src:require('@/assets/imsges/qrcode1.png'),title:'张恒春公众号'},
              {src:require('@/assets/imsges/qrcode2.png'),title:'张恒春微博'},
              {src:require('@/assets/imsges/qrcode3.png'),title:'张恒春抖音'},
            ]
        };
    },

    mounted() {
        
    },

    methods: {
         
         clickDetail(key){
          switch(key){
            case 0 :
              this.$emit('callback','service',2)
              break;
            case 1 :
              this.$emit('callback','news',3)
              break;
          }

         }
    },
};
</script>

<style lang="scss" scoped>

</style>